<template>
  <div class="favorites">
    <van-nav-bar title="收藏和赞" />
    <div class="favorites-content">
      <div class="favorites-stats">
        <div class="stat-item">
          <div class="stat-number">{{ favoriteSongs.length }}</div>
          <div class="stat-label">收藏歌曲</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ favoriteAlbums.length }}</div>
          <div class="stat-label">收藏专辑</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ likeCount }}</div>
          <div class="stat-label">点赞内容</div>
        </div>
      </div>
      
      <div class="section-title">收藏的歌曲</div>
      <div class="song-list">
        <div class="song-item" v-for="song in favoriteSongs" :key="song.id">
          <img :src="song.cover" class="song-cover" />
          <div class="song-info">
            <div class="song-title">{{ song.title }}</div>
            <div class="song-artist">{{ song.artist }}</div>
            <div class="song-time">{{ song.favoriteTime }}</div>
          </div>
          <van-icon name="star" class="star-icon" color="#f56c6c" />
        </div>
      </div>
      
      <div class="section-title">收藏的专辑</div>
      <div class="album-grid">
        <div class="album-item" v-for="album in favoriteAlbums" :key="album.id">
          <img :src="album.cover" class="album-cover" />
          <div class="album-name">{{ album.name }}</div>
          <div class="album-artist">{{ album.artist }}</div>
        </div>
      </div>
      
      <van-button type="primary" round icon="star" class="discover-btn">去发现喜欢的内容</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const favoriteSongs = ref([
  { id: 1, title: '晴天', artist: '周杰伦', cover: 'https://img0.baidu.com/it/u=3315620404,701141190&fm=253&app=138&f=JPEG?w=834&h=800', favoriteTime: '2天前' },
  { id: 2, title: '稻香', artist: '周杰伦', cover: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', favoriteTime: '3天前' },
  { id: 3, title: '青花瓷', artist: '周杰伦', cover: 'https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg', favoriteTime: '5天前' },
  { id: 4, title: '七里香', artist: '周杰伦', cover: 'https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg', favoriteTime: '1周前' },
  { id: 5, title: '夜曲', artist: '周杰伦', cover: 'https://img1.baidu.com/it/u=4050763066,3874124631&fm=253&app=120&f=JPEG?w=1422&h=800', favoriteTime: '1周前' },
  { id: 6, title: '发如雪', artist: '周杰伦', cover: 'https://img0.baidu.com/it/u=3315620404,701141190&fm=253&app=138&f=JPEG?w=834&h=800', favoriteTime: '2周前' },
  { id: 7, title: '东风破', artist: '周杰伦', cover: 'https://pic4.zhimg.com/v2-5b9de1d48ee943f3c8fde04035a58bd5_r.jpg', favoriteTime: '2周前' },
  { id: 8, title: '菊花台', artist: '周杰伦', cover: 'https://img1.baidu.com/it/u=3575126618,2505183193&fm=253&app=138&f=JPEG?w=820&h=800', favoriteTime: '3周前' }
])

const favoriteAlbums = ref([
  { id: 1, name: '叶惠美', artist: '周杰伦', cover: 'https://img1.baidu.com/it/u=2843522830,330223788&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
  { id: 2, name: '魔杰座', artist: '周杰伦', cover: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
  { id: 3, name: '我很忙', artist: '周杰伦', cover: 'https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg' },
  { id: 4, name: '七里香', artist: '周杰伦', cover: 'https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg' },
  { id: 5, name: '11月的萧邦', artist: '周杰伦', cover: 'https://img1.baidu.com/it/u=4050763066,3874124631&fm=253&app=120&f=JPEG?w=1422&h=800' },
  { id: 6, name: '依然范特西', artist: '周杰伦', cover: 'https://img0.baidu.com/it/u=377267631,2990999101&fm=253&app=138&f=JPEG?w=760&h=760' }
])

const likeCount = computed(() => 156)
</script>

<style scoped>
.favorites {
  min-height: 100vh;
  background: var(--van-background-color, #fff);
  color: var(--van-text-color, #222);
}
.favorites-content {
  padding: 16px;
}
.favorites-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 24px;
  padding: 20px;
  background: #f8f8f8;
  border-radius: 12px;
}
.stat-item {
  text-align: center;
}
.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #f56c6c;
}
.stat-label {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}
.section-title {
  font-weight: bold;
  margin: 18px 0 8px 0;
  font-size: 15px;
}
.song-list {
  margin-bottom: 24px;
}
.song-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}
.song-cover {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  margin-right: 12px;
}
.song-info {
  flex: 1;
}
.song-title {
  font-weight: bold;
  font-size: 14px;
}
.song-artist {
  color: #888;
  font-size: 12px;
  margin-top: 2px;
}
.song-time {
  color: #aaa;
  font-size: 10px;
  margin-top: 2px;
}
.star-icon {
  font-size: 20px;
}
.album-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.album-item {
  text-align: center;
}
.album-cover {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  margin-bottom: 8px;
}
.album-name {
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 2px;
}
.album-artist {
  color: #888;
  font-size: 10px;
}
.discover-btn {
  width: 100%;
  margin-top: 16px;
}
</style>